<template>
  <div class="addlinkdetail">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
      <el-form :model="formData" :rules="rules" ref="linktypeFrom">
        <el-form-item label="产品类型" prop="productType">
          <el-select v-model="formData.productType" placeholder="请选择产品类型">
            <el-option
              v-for="item in appTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接名称" prop="name">
          <el-input v-model="formData.name" autocomplete="off" maxlength="15" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="接口地址">
          <el-input v-model="formData.dataUrl" autocomplete="off" maxlength="60" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="页面地址">
          <el-input v-model="formData.pageUrl" autocomplete="off" maxlength="60" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveLinktype">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTypeList, addAppType } from "@/api/basisMG";
export default {
  props: {
    typeDialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogFormVisible: false,
      title: "",
      formData: {
        id: "",
        type: 2,
        productType: "",
        name: "",
        dataUrl: "",
        pageUrl: "",
        note: "",
      },
      appTypeList: [],
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        productType: [{ required: true, message: "请选择产品类型", trigger: "blur" }],
      },
      appformdata: {
        type: 0,
        productType: "",
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    async getTypeList() {
      const res = await getTypeList(this.appformdata);
      this.appTypeList = res.data.content;
    },
    showEdit(row) {
      if (row.isSet == 0) {
        this.dialogFormVisible = true;
        this.title = "添加链接类型";
        this.formData.name = "";
        this.formData.productType = "";
        this.formData.dataUrl = "";
        this.formData.pageUrl = "";
        this.formData.id = "";
      } else {
        this.dialogFormVisible = true;
        this.title = "编辑链接类型";
        this.formData.name = row.name;
        this.formData.productType = row.productType;
        this.formData.dataUrl = row.dataUrl;
        this.formData.pageUrl = row.pageUrl;
        this.formData.id = row.id;
      }
    },
    saveLinktype() {
      this.$refs["linktypeFrom"].validate(async (valid) => {
        if (valid) {
          const data = await addAppType(this.formData);
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success(data.message);
          setTimeout(() => {
            this.dialogFormVisible = false;
            this.emitList();
          }, 500);
        } else {
          this.$message.warning("提交失败, 请检查内容是否填写正确!!!");
          return false;
        }
      });
    },
    emitList(e) {
      this.$emit("editorList", e);
    },
  },
  created() {
    this.getTypeList();
  },
  watch: {
    // 监听 typeDialogFormVisible 改变
    typeDialogFormVisible(oldVal, newVal) {
      this.dialogFormVisible = this.typeDialogFormVisible;
    },
  },
};
</script>
<style lang="scss"></style>
